<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="handleOption('add')">新 增
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:levelTwoName="{row}">
        <el-tag style="margin-left: 5px" v-for="(item,index) in row.levelTwoList" :key="index">{{item}}</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编辑
        </el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删除
        </el-button>
      </template>
    </element-table>

    <el-dialog :visible.sync="showDialog"
               :title="edit?'编 辑':'新 增'"
               width="40%"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="submitData"
               label-position="right"
               ref="formdata"
               :rules='rules'
               label-width="180px">
        <el-form-item label="一级分类名称:" prop="name">
          <el-input placeholder="请输入药品一级分类名称"
                    v-model="submitData.name"
                    style="width: 260px"
                    clearable/>

        </el-form-item>
        <el-form-item label="二级分类名称:" class="is-required">
          <el-button type="primary"
                     @click="handleAddClassify">添加二级药品
          </el-button>
        </el-form-item>
        <el-form-item v-for="(item,index) in submitData.childrenDtoList" :key="index">
          <el-input placeholder="请输入药品二级分类名称"
                    v-model="item.name"
                    style="width: 260px"
                    clearable/>
          <el-button type="danger"
                     @click="handleDelClassify(index)">删除
          </el-button>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button @click="showDialog=false"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   v-prevent-re-click
                   @click="handleSubmit()">确 认
        </el-button>
      </p>

    </el-dialog>
  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: "index",
  data() {
    return {
      showDialog: false,
      edit: false,
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      tableData: [],
      submitData: {
        id: '',
        name: '',
        level: 1,
        childrenDtoList: []
      },
      columns: [
        {
          label: '一级分类',
          prop: 'levelOneName',
          align: "center",
          width: 200
        }, {
          label: '二级分类',
          prop: 'levelTwoName',
          align: "center",
          isSlot: true
        }, {
          label: '创建时间',
          prop: 'createTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.createTime)
          },
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      rules: {
        name: [
          {required: true, message: '请输入一级药品名称'}
        ]
      }

    }
  },
  created() {
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    //查询列表
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getFamilyTypeList, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
          this.tableData.forEach(item => {
            if (item.levelTwoName){
              this.$set(item, 'levelTwoList', item.levelTwoName.split(','))
            }
          })
        }
      })
    },
    //获取详情
    getDetail(id) {
      this.post(this.api.slowDisease.getFamilyTypeDetail, {
        id: id
      }).then((res) => {
        if (res.data.code === '200') {
          this.submitData = Object.assign(this.submitData, res.data.object)
        }
      })
    },
    //删除列表
    delFamilyType(id, index, type) {
      this.post(this.api.slowDisease.delFamilyType, {
        id: id
      }).then((res) => {
        if (res.data.code === '200') {
          if (type == 'detail') {
            //删除二级分类的药品
            this.submitData.childrenDtoList.splice(index, 1)
          } else {
            //删除列表中的药品
            this.$message.success('删除成功')
          }
          this.getList()
        }
      })
    },
    handleOption(op, row) {
      switch (op) {
        case 'add':
          this.showDialog = true
          this.edit = false
          this.submitData = {
            id: '',
            name: '',
            level: 1,
            childrenDtoList: []
          }
          break
        case 'edit':
          this.showDialog = true
          this.edit = true
          this.submitData = {
            id: '',
            name: '',
            level: 1,
            childrenDtoList: []
          }
          this.getDetail(row.id)
          break;
        case 'del':
          this.$confirm('确认继续删除?', '提示', {
            type: 'warning'
          }).then(() => {
            this.delFamilyType(row.id, '', 'list')
          })
          break
      }
    },
    handleAddClassify() {
      this.submitData.childrenDtoList.push({
        name: '',
        level: 2,
        id: '',
        parentId: '',
      })
    },
    handleDelClassify(index) {

      if (this.submitData.childrenDtoList[index].id) {
        this.$confirm('确认继续删除?', '提示', {
          type: 'warning'
        }).then(() => {
          this.delFamilyType(this.submitData.childrenDtoList[index].id, index, 'detail')
        })
      } else {
        this.submitData.childrenDtoList.splice(index, 1)
      }

    },
    handleSubmit() {
      this.$refs.formdata.validate(valid => {
        if (valid) {

            let isAllName = this.submitData.childrenDtoList.every(item => item.name)
            if (isAllName) {
              this.post(this.api.slowDisease.saveFamilyTypeList, this.submitData).then((res) => {
                if (res.data.code === '200') {
                  this.$message.success('操作成功')
                  this.showDialog = false
                  this.getList()
                }
              })
            } else {
              this.$message.warning('请输入二级分类')
            }

        }
      })
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
